<div class="some-list some-table" style="width:615px;">
	<div class="some-list-header" style="background-color:#9A9A9A;color:#FFF;">
		<span class="title">Alarm</span>
		<span class="right" style="text-decoration: underline;cursor:pointer;margin-right:6px;" ng-click="onAddAlarm()">+ Add</span>
	</div>
	<div class="some-list-content">
		<div class="wrapper">
			<table>
				<thead>
					<tr>
						<th class="col-md-4">Rule Name</th>
						<th class="col-md-3">User Group</th>
						<th class="col-md-2">Threshold</th>
						<th class="col-md-2">Type</th>
						<th class="col-md-2"></th>
					</tr>
				</thead>
				<tbody ng-click="onCaptureUpdateClick($event)">
					<tr class="_edit1 hide-me" style="background-color:#F3FBFF">
						<td class="col-md-4">
							<select class="form-control" name="rule" style="width:95%;height:26px;padding:2px;">
								<option value="">Select rule</option>
								<option ng-repeat="rule in ruleSets" value="{{rule}}">{{rule}}</option>
							</select>
						</td>
						<td class="col-md-3">
							<select class="form-control" name="userGroup" style="width:95%;height:26px;padding:2px;">
								<option value="">Select user group</option>
								<option ng-repeat="userGroup in userGroupList" value="{{userGroup.id}}">{{userGroup.id}}</option>
							</select>
						</td>
						<td class="col-md-2">
							<input type="number" value="1" placeholder="Threshold" name="threshold" class="form-control" style="height:26px;width:90%"/>
						</td>
						<td class="col-md-2">
							<select class="form-control" name="type" style="width:95%;height:26px;padding:2px;">
								<option value="all">All</option>
								<option value="email">Email</option>
								<option value="sms">SMS</option>
								<option value="">None</option>
							</select>
						</td>
						<td class="col-md-2">
							<div class="_edit" style="line-height:20px;">
								<span class="glyphicon glyphicon-ok update-confirm edit-confirm" aria-hidden="true"></span>
								<span class="glyphicon glyphicon-remove update-cancel remove" aria-hidden="true"></span>
							</div>
							<div class="_add hide-me" style="line-height:20px;">
								<span class="glyphicon glyphicon-ok add-confirm edit-confirm" aria-hidden="true"></span>
								<span class="glyphicon glyphicon-remove add-cancel remove" aria-hidden="true"></span>
							</div>
						</td>
					</tr>
					<tr class="_edit2 hide-me" style="background-color:#F3FBFF">
						<td colspan="4">
							<input type="text" placeholder="Note..." class="form-control" name="notes" style="height:26px"/>
						</td>
						<td></td>
					</tr>
					<tr ng-repeat="rule in ruleList" id="{{prefix + rule.ruleId}}">
						<td class="col-md-4">{{rule.checkerName}}</td>
						<td class="col-md-3">{{rule.userGroupId}}</td>
						<td class="col-md-2">{{rule.threshold}}</td>
						<td class="col-md-2">{{getType( rule )}}</td>
						<td class="col-md-2">
							<div class="_normal">
								<span class="glyphicon glyphicon-pencil edit" aria-hidden="true" ng-click="onUpdateAlarm($event)"></span>
								<span class="glyphicon glyphicon-remove remove" aria-hidden="true" ng-click="onRemoveAlarm($event)"></span>
							</div>
							<div class="_remove hide-me">
								<span class="glyphicon glyphicon-arrow-left remove-cancel" aria-hidden="true" ng-click="onCancelRemoveAlarm()"></span>
								<span class="glyphicon glyphicon-remove remove remove-confirm" aria-hidden="true" ng-click="onApplyRemoveAlarm()"></span>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="some-guide" style="padding-top:15%;">
		Select a 'Application'<br>to enable here
	</div>
	<div class="some-loading hide-me">
		<div class="timer-loader" style="margin-top:30%"></div>
	</div>
	<div class="some-alert hide-me">
		<span class="message"></span>
		<span class="close-alert" style="color:#FFF;" ng-click="onCloseAlert()">X</span>
	</div>
</div>